﻿<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Pullman - eCommerce Bootstrap 4 Template</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="../../assets/img/favicon.ico">

    <!-- CSS
	============================================ -->
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,700,800,900%7CPoppins:300,400,500,600,700,800,900" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../../assets/css/vendor/bootstrap.min.css">
    <!-- Font-awesome CSS -->
    <link rel="stylesheet" href="../../assets/css/vendor/font-awesome.min.css">
    <!-- Slick slider css -->
    <link rel="stylesheet" href="../../assets/css/plugins/slick.min.css">
    <!-- animate css -->
    <link rel="stylesheet" href="../../assets/css/plugins/animate.css">
    <!-- Nice Select css -->
    <link rel="stylesheet" href="../../assets/css/plugins/nice-select.css">
    <!-- jquery UI css -->
    <link rel="stylesheet" href="../../assets/css/plugins/jqueryui.min.css">
    <!-- main style css -->
    <link rel="stylesheet" href="../../assets/css/style.css">

</head>

<body>
    <!-- Start Header Area -->
    <header class="header-area" id="header"></header>
    <!-- end Header Area -->


    <!-- offcanvas search form start -->
    <div class="offcanvas-search-wrapper">
        <div class="offcanvas-search-inner">
            <div class="offcanvas-close">
                <i class="fa fa-close"></i>
            </div>
            <div class="container">
                <div class="offcanvas-search-box">
                    <div class="d-flex bdr-bottom w-100">
                        <input id="searchKey" type="text" placeholder="Search entire storage here...">
                        <button class="search-btn" onclick="search()"><i class="fa fa-search"></i>search</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- offcanvas search form end -->

    <main>
        <!-- breadcrumb area start -->
        <div class="breadcrumb-area breadcrumb-img bg-img" data-bg="../../assets/img/banner/shop.jpg">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="breadcrumb-wrap">
                            <nav aria-label="breadcrumb">
                                <h3 class="breadcrumb-title">SHOP</h3>
                                <ul class="breadcrumb justify-content-center">
                                    <li class="breadcrumb-item"><a href="index.html"><i class="fa fa-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="shop.html">Shop</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">Compare</li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- breadcrumb area end -->

        <!-- compare main wrapper start -->
        <div class="compare-page-wrapper section-padding">
            <div class="container">
                <div class="section-bg-color">
                    <div class="row">
                        <div class="col-lg-12">
                            <!-- Compare Page Content Start -->
                            <div class="compare-page-content-wrap">
                                <div class="compare-table table-responsive">
                                    <table class="table table-bordered mb-0">
                                        <tbody>
                                            <tr>
                                                <td class="first-column"><b>Product</b></td>
                                                <td class="product-image-title">
                                                    <a href="product-details.html" class="image">
                                                        <img class="img-fluid" src="../../assets/img/product/product-1.jpg" alt="Compare Product">
                                                    </a>
                                                    <a href="#" class="category">Shoes</a>
                                                    <a href="product-details.html" class="title">PRIMITIVE MENS SHOES</a>
                                                </td>
                                                <td class="product-image-title">
                                                    <a href="product-details.html" class="image">
                                                        <img class="img-fluid" src="../../assets/img/product/product-2.jpg" alt="Compare Product">
                                                    </a>
                                                    <a href="#" class="category">Keds</a>
                                                    <a href="product-details.html" class="title">REXPO WOMENS SHOES</a>
                                                </td>
                                                <td class="product-image-title">
                                                    <a href="product-details.html" class="image">
                                                        <img class="img-fluid" src="../../assets/img/product/product-3.jpg" alt="Compare Product">
                                                    </a>
                                                    <a href="#" class="category">Sports</a>
                                                    <a href="product-details.html" class="title">QUICKIIN MENS SHOES</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="first-column"><b>Description</b></td>
                                                <td class="pro-desc">
                                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
                                                        nulla, explicabo iste a rerum pariatur.</p>
                                                </td>
                                                <td class="pro-desc">
                                                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit
                                                        commodi obcaecati cumque consectetur alias incidunt?</p>
                                                </td>
                                                <td class="pro-desc">
                                                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius,
                                                        facere. Fuga asperiores inventore iste tempora.</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="first-column"><b>Price</b></td>
                                                <td class="pro-price">$295</td>
                                                <td class="pro-price">$275</td>
                                                <td class="pro-price">$395</td>
                                            </tr>
                                            <tr>
                                                <td class="first-column"><b>Color</b></td>
                                                <td class="pro-color">Black</td>
                                                <td class="pro-color">Red</td>
                                                <td class="pro-color">Blue</td>
                                            </tr>
                                            <tr>
                                                <td class="first-column"><b>Stock</b></td>
                                                <td class="pro-stock">In Stock</td>
                                                <td class="pro-stock">Stock Out</td>
                                                <td class="pro-stock">In Stock</td>
                                            </tr>
                                            <tr>
                                                <td class="first-column"><b>Add To Cart</b></td>
                                                <td><a href="user/cart.html" class="btn btn-sqr">Add to Cart</a></td>
                                                <td><a href="user/cart.html" class="btn btn-sqr disabled">Add to Cart</a></td>
                                                <td><a href="user/cart.html" class="btn btn-sqr">Add to Cart</a></td>
                                            </tr>
                                            <tr>
                                                <td class="first-column"><b>Rating</b></td>
                                                <td class="pro-ratting">
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star-o"></i>
                                                </td>
                                                <td class="pro-ratting">
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                </td>
                                                <td class="pro-ratting">
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star-o"></i>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="first-column"><b>Remove</b></td>
                                                <td class="pro-remove">
                                                    <button><i class="fa fa-trash-o"></i></button>
                                                </td>
                                                <td class="pro-remove">
                                                    <button><i class="fa fa-trash-o"></i></button>
                                                </td>
                                                <td class="pro-remove">
                                                    <button><i class="fa fa-trash-o"></i></button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <!-- Compare Page Content End -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- compare main wrapper end -->
    </main>

    <!-- Scroll to top start -->
    <div class="scroll-top not-visible">
        <i class="fa fa-angle-up"></i>
    </div>
    <!-- Scroll to Top End -->


    <!-- footer area start -->
    <footer class="black-bg" id="footer"></footer>
    <!-- footer area end -->



    <!-- JS
============================================ -->

    <!-- Modernizer JS -->
    <script src="../../assets/js/vendor/modernizr-3.6.0.min.js"></script>
    <!-- jQuery JS -->
    <script src="../../assets/js/vendor/jquery-3.3.1.min.js"></script>
    <!-- Popper JS -->
    <script src="../../assets/js/vendor/popper.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="../../assets/js/vendor/bootstrap.min.js"></script>
    <!-- slick Slider JS -->
    <script src="../../assets/js/plugins/slick.min.js"></script>
    <!-- Countdown JS -->
    <script src="../../assets/js/plugins/countdown.min.js"></script>
    <!-- Nice Select JS -->
    <script src="../../assets/js/plugins/nice-select.min.js"></script>
    <!-- jquery UI JS -->
    <script src="../../assets/js/plugins/jqueryui.min.js"></script>
    <!-- Image zoom JS -->
    <script src="../../assets/js/plugins/image-zoom.min.js"></script>
    <!-- image loaded js -->
    <script src="../../assets/js/plugins/imagesloaded.pkgd.min.js"></script>
    <!-- masonry  -->
    <script src="../../assets/js/plugins/masonry.pkgd.min.js"></script>
    <!-- mailchimp active js -->
    <script src="../../assets/js/plugins/ajaxchimp.js"></script>
    <!-- contact form dynamic js -->
    <script src="../../assets/js/plugins/ajax-mail.js"></script>
    <!-- google map api -->
    <script src="http://ditu.google.cn/maps/api/js?key=AIzaSyCfmCVTjRI007pC1Yk2o2d_EhgkjTsFVN8"></script>
    <!-- google map active js -->
    <script src="../../assets/js/plugins/google-map.js"></script>
    <!-- Main JS -->
    <script src="../../assets/js/main.js"></script>
    <script>
        $("#header").load("/view/common/header.html");
        $("#footer").load("/view/common/footer.html");
    </script>
    <script type="text/javascript">
        function search() {
            console.log("11111")
            var key = $("#searchKey").val();
            if (key != '') {
                window.location.href = "/view/product/shop.html?key="+key;
            }
        }
    </script>
</body>

</html>